/**************************************
 *
 * VLOOK CSS - @media 相关的样式
 * (配合 base.less 进行使用)
 *
 * V24.2
 * 2024-05-21
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

// **********
// 修改时须同步修改 vlook.js 的同名参数
@gSmallScreenWidth:1270px;
// **********

// ---------------
// 针对大于等于该分辨设备的 UI 调整
@media screen and (min-width: 1441px) {
    :root {
        --v-nav-center-w:400px;
        --v-nav-center-hidden-l:-410px;
        --v-tb-btn-w:40px;
    }
}

// ---------------
// 针对大于等于该分辨设备的 UI 调整
@media screen and (min-height: 800px) {
    // 工具栏、逐章导航栏不在封面显示时的样式
    :root {
        --v-top-margin:-3px;
    }
}
// ---------------
// 针对小于等于该分辨设备的 UI 调整
@media screen and (max-width: 1439px) {
    // 取消表格的自动换行
    // body.typora-export table,
    #write table {
        white-space: pre;
    }
}

// ---------------
// 针对小于等于该分辨设备的 UI 调整
@media screen and (max-width: @gSmallScreenWidth) {
    .v-btn-group.hover {
        box-shadow: var(--v-fl-sd), @contrastBorder;
    }
    // 逐章导航 UI
    .v-chapter-nav {
        // left: 20px !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }
    .v-chapter-nav-doc-title,
    .v-chapter-nav-current {
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
    .v-chapter-nav-prev,
    .v-chapter-nav-next {
        width: 20% !important;
        border-radius: 0 !important;
    }
    .v-chapter-nav-prev.noeffect.hover,
    .v-chapter-nav-next.noeffect.hover,
    .v-chapter-nav-prev.effect::before,
    .v-chapter-nav-next.effect::before {
        border-radius: 0 !important;
    }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 1024px) {
    .v-chapter-nav-prev-text,
    .v-chapter-nav-next-text {
        display: none !important;
    }
}

// 针对超大屏手机、iPad 等设备的 UI 调整
@media screen and (min-width: 641px) and (max-width: 1023px) {
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用块的调整
@media screen and (max-width: 1000px) {
    // ========================================
    // 纵向显示的整体调整
    // ----------------------------------------
    // 以四栏列表方式显示列表
    #write @{n3Hr_MdHr}+ul>li,
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>li,
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 以五栏列表方式显示列表
    #write @{n4Hr_MdHr}+ul>li,
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>li,
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        min-width: 100% !important;
        height: auto !important;
    }
    // 四栏列表内容之间的样式
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 五栏列表内容之间的样式
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        margin-left: 0 !important;
    }

    // ----------------------------------------
    // 四栏引用块
    #write @{n3Hr_MdHr}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
        min-width: 100% !important;
        height: auto !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 四栏引用块内容之间
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
        margin-left: 0 !important;
    }
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用块的调整
@media screen and (max-width: 800px) {
    // ========================================
    // 纵向显示的整体调整
    // ----------------------------------------
    // 列表分栏
    // 以三栏方式显示列表
    #write @{n2Hr_MdHr}+ul>li,
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>li,
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 以四栏方式显示列表
    #write @{n3Hr_MdHr}+ul>li,
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>li,
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 以五栏方式显示列表
    #write @{n4Hr_MdHr}+ul>li,
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>li,
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        min-width: 100% !important;
        height: auto !important;
    }
    // 三栏列表内容之间的样式
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 四栏列表内容之间的样式
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 五栏列表内容之间的样式
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        margin-left: 0 !important;
    }

    // ----------------------------------------
    // 三栏引用块
    #write @{n2Hr_MdHr}+@{quote_details},
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    // 四栏引用块
    #write @{n3Hr_MdHr}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
        min-width: 100% !important;
        height: auto !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 三栏引用块内容之间
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    // 四栏引用块内容之间
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
        margin-left: 0 !important;
    }

    .v-nav-center-float {
        bottom: 60px;
    }
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用块的调整
@media screen and (max-width: 600px) {
    // ========================================
    // 纵向显示的整体调整
    // ----------------------------------------
    // 列表分栏
    // 以双栏方式显示列表
    #write @{hr_MdHr}+ul>li,
    #write @{hr_MdHr}+ul>@{n2Li},
    #write @{hr_MdHr}+ol>li,
    #write @{hr_MdHr}+ol>@{n2Li},
    // 以三栏方式显示列表
    #write @{n2Hr_MdHr}+ul>li,
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>li,
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 以四栏方式显示列表
    #write @{n3Hr_MdHr}+ul>li,
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>li,
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 以五栏方式显示列表
    #write @{n4Hr_MdHr}+ul>li,
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>li,
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        min-width: 100% !important;
        height: auto !important;
    }
    // 双栏列表内容之间的样式
    #write @{hr_MdHr}+ul>@{n2Li},
    #write @{hr_MdHr}+ol>@{n2Li},
    // 三栏列表内容之间的样式
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 四栏列表内容之间的样式
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 五栏列表内容之间的样式
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        margin-left: 0 !important;
    }

    // ----------------------------------------
    // 双栏引用块
    #write @{hr_MdHr}+@{quote_details},
    #write @{hr_MdHr}+@{quote_details}+@{quote_details},
    // 三栏引用块
    #write @{n2Hr_MdHr}+@{quote_details},
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    // 四栏引用块
    #write @{n3Hr_MdHr}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
        min-width: 100% !important;
        height: auto !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 双栏引用块内容之间
    #write @{hr_MdHr}+@{quote_details}+@{quote_details},
    // 三栏引用块内容之间
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n2Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    // 四栏引用块内容之间
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
    #write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
        margin-left: 0 !important;
    }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 550px) {
    // 封面：#write 下 H6 作为第一个元素时
    @{coverAfterYAML}, // 有 YAML 的情况
    @{coverWithoutYAML}, // 无 YAML 的情况
    // 封底：#write 下 H6 作为最后一个元素时
    @{backcover} {
    // #write>:is(.md-hr, hr)+h1:last-child {
        font-size: 2em;
    }
}

// 移动端时相关样式
.genForMobile() {
    .v-link-info-list {
        width: auto;
        left: 20px;
    }

    #write .v-post-card {
        display: block;
        position: initial;
        border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    }
    #write .v-q>p:has(img[src*="#card"][src*="#border"]) {
        border-radius: var(--v-r-b);
    }
    .typora-export-content>#write blockquote:has(>p img[src*="#card"][src*="#border"]) {
        border-bottom-left-radius: var(--v-r-b);
        border-bottom-right-radius: var(--v-r-b);
    }
}
// 针对大屏手机的 UI 调整
@media screen and (min-width: 361px) and (max-width: 639px) {
    .genForMobile();
}

// 针对中小屏手机的 UI 调整
@media screen and (max-width: 360px) {
    .genForMobile();
}

// ---------------
// 针对不的 DRP
@media  (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
}

// ---------------
// 针对打印的配置
@media print {
    html {
        font-size: 1em !important;
    }

    #write {
        margin: 20px !important;
    }

    // #write :is(h1, h2, h3, h4, h5, h6) {
    //     color: var(--d-fc) !important;
    // }
    #write :is(h1, h2, h3, h4, h5)>span {
        color: inherit !important;
        background: none !important;
    }

    .v-doc-title {
        opacity: 1;
    }

    .v-tbl-x {
        box-shadow: none !important;
        background: none !important;
    }

    // #write table:hover,
    // body.typora-export table:hover {
    //     border-color: var(--tbl-bd) !important;
    // }

    // 打印时先关闭 VLOOK 未加载完成前样式
    .typora-export-content>#write::before {
        display: none !important;
    }

    // .v-caption:hover {
    //     background: var(--pn-c);
    // }

    .v-img-invert-dark {
        filter: none;
    }

    blockquote,
    details {
        display: block !important;
        // background: var(--ac-t1-fade) !important;
    }

    .v-welcome-page,
    .v-tool-tips,
    .v-info-tips,
    .v-bottom-tips,
    .v-more-doc-content-before,
    .v-more-doc-content-after,
    .v-link-error-list,
    .v-btn-open-in-new-tab,
    .v-toc-handle,
    .v-toolbar,
    .v-btn-outline,
    .v-chapter-nav,
    .v-nav-center,
    .v-nav-center-header,
    .v-nav-center-body,
    .v-status-bar {
        display: none !important;
        // filter: none;
    }

    .v-pg-current-item {
        box-shadow: none !important;
    }

    // 显示原始的目录
    #write .md-toc {
        display: block !important;
    }
    .v-toc {
        display: block !important;
        visibility: visible !important;
    }

    // 清空当前章节的样式
    .v-item-current {
        background: none !important;
    }
    .v-item-current a {
        color: var(--d-fc) !important;
    }

    // 封面装饰文本样式
    .typora-export-content>@{coverAfterYAML}::before,
    .typora-export-content>@{coverWithoutYAML}::before,
    .typora-export-content>@{coverAfterYAML}::after,
    .typora-export-content>@{coverWithoutYAML}::after {
        content: "" !important;
    }
}

// 针对 Dark Mode的配置
@media (prefers-color-scheme: dark) {
    :root {
        --v-color-scheme: dark;
        --v-invert-dark: var(--v-invert-dark-dk); // Dark Mode下图片滤镜
        --v-brightness-dk: var(--v-brightness-dark-dk); // Dark Mode下封面、封底滤镜
        --v-selection-color: var(--v-selection-color-dk);

        // --------------------
        // 颜色变量
        --d-bc: var(--d-bc-dk);
        --fade-r: var(--fade-r-dk);
        --fade-g: var(--fade-g-dk);
        --fade-b: var(--fade-b-dk);
        --d-bi: var(--d-bi-dk);
        --d-fc: var(--d-fc-dk);
        --d-fc-a: var(--d-fc-a-dk);

        --pn-c: var(--pn-c-dk);
        --pn-c-a: var(--pn-c-a-dk);
        --pn-fade-r: var(--pn-fade-r-dk);
        --pn-fade-g: var(--pn-fade-g-dk);
        --pn-fade-b: var(--pn-fade-b-dk);
        --blockquote-bg: var(--blockquote-bg-dk);

        --a-color: var(--a-color-dk);
        --mark-bg: var(--mark-bg-dk);
        --tbl-h-bd: var(--tbl-h-bd-dk);
        --tbl-bd: var(--tbl-bd-dk);
        --tbl-tr-hv: var(--tbl-tr-hv-dk);
        --tbl-th-bg: var(--tbl-th-bg-dk);
        --tbl-td-bg: var(--tbl-td-bg-dk);
        --tbl-cell-bd: var(--tbl-cell-bd-dk);
        --tbl-row-g-alpha: var(--tbl-row-g-alpha-dk);
        --toc-h-num-color: var(--toc-h-num-color-dk);
        --h-f: var(--h-f-dk);
        --h-box-shadow: var(--h-box-shadow-dk);
        --h-bg-start: var(--h-bg-start-dk);
        --h-bg-end: var(--h-bg-end-dk);
        --code-bg: var(--code-bg-dk);
        --code-t: var(--code-t-dk);
        --std-code-shadow: var(--std-code-shadow-dk);
        --rb-code-shadow: var(--rb-code-shadow-dk);

        --v-fl-sd: var(--v-fl-sd-dk);
        --v-fl-i-sd: var(--v-fl-i-sd-dk);

        --c-blk-bg: var(--c-blk-bg-dk);

        --fig-solid-bg: var(--fig-solid-bg-dk);

        --v-fig-grid-l: var(--v-fig-grid-l-dk);
        --v-fig-grid-b: var(--v-fig-grid-b-dk);

        --v-fig-grid-l-invert: var(--v-fig-grid-l-invert-dk);
        --v-fig-grid-b-invert: var(--v-fig-grid-b-invert-dk);

        --key-bg: var(--key-bg-dk);
        --key-reflect: var(--key-reflect-dk);
        --key-shadow: var(--key-shadow-dk);

        --doc-shadow: var(--doc-shadow-dk);

        --cur-pointer: var(--cur-pointer-dk);
        --cur-copy-normal: var(--cur-copy-normal-dk);
        --cur-copy-as-md: var(--cur-copy-as-md-dk);
        --cur-copy: var(--cur-copy-normal);
        --cur-pointer-text: var(--cur-pointer-text-dk);
        --cur-laser: var(--cur-laser-dk);
        --cur-md: var(--cur-md-dk);
        --cur-doclib: var(--cur-doclib-dk);
        --cur-http: var(--cur-http-dk);
        --cur-https: var(--cur-https-dk);
        --cur-email: var(--cur-email-dk);
        --cur-docment: var(--cur-docment-dk);
        --cur-archive: var(--cur-archive-dk);
        --cur-risk: var(--cur-risk-dk);
        --cur-inner: var(--cur-inner-dk);

        --ac-rd: var(--ac-rd-dk);
        --ac-rd-a: var(--ac-rd-a-dk);
        --ac-rd-fade: var(--ac-rd-fade-dk);
        --ac-rd-title: var(--ac-rd-title-dk);
        --ac-og: var(--ac-og-dk);
        --ac-og-a: var(--ac-og-a-dk);
        --ac-og-fade: var(--ac-og-fade-dk);
        --ac-og-title: var(--ac-og-title-dk);
        --ac-ye: var(--ac-ye-dk);
        --ac-ye-a: var(--ac-ye-a-dk);
        --ac-ye-fade: var(--ac-ye-fade-dk);
        --ac-ye-title: var(--ac-ye-title-dk);
        --ac-lm: var(--ac-lm-dk);
        --ac-lm-a: var(--ac-lm-a-dk);
        --ac-lm-fade: var(--ac-lm-fade-dk);
        --ac-lm-title: var(--ac-lm-title-dk);
        --ac-gn: var(--ac-gn-dk);
        --ac-gn-a: var(--ac-gn-a-dk);
        --ac-gn-fade: var(--ac-gn-fade-dk);
        --ac-gn-title: var(--ac-gn-title-dk);
        --ac-mn: var(--ac-mn-dk);
        --ac-mn-a: var(--ac-mn-a-dk);
        --ac-mn-fade: var(--ac-mn-fade-dk);
        --ac-mn-title: var(--ac-mn-title-dk);
        --ac-ol: var(--ac-ol-dk);
        --ac-ol-a: var(--ac-ol-a-dk);
        --ac-ol-fade: var(--ac-ol-fade-dk);
        --ac-ol-title: var(--ac-ol-title-dk);
        --ac-wn: var(--ac-wn-dk);
        --ac-wn-a: var(--ac-wn-a-dk);
        --ac-wn-fade: var(--ac-wn-fade-dk);
        --ac-wn-title: var(--ac-wn-title-dk);
        --ac-aq: var(--ac-aq-dk);
        --ac-aq-a: var(--ac-aq-a-dk);
        --ac-aq-fade: var(--ac-aq-fade-dk);
        --ac-aq-title: var(--ac-aq-title-dk);
        --ac-cy: var(--ac-cy-dk);
        --ac-cy-a: var(--ac-cy-a-dk);
        --ac-cy-fade: var(--ac-cy-fade-dk);
        --ac-cy-title: var(--ac-cy-title-dk);
        --ac-bu: var(--ac-bu-dk);
        --ac-bu-a: var(--ac-bu-a-dk);
        --ac-bu-fade: var(--ac-bu-fade-dk);
        --ac-bu-title: var(--ac-bu-title-dk);
        --ac-se: var(--ac-se-dk);
        --ac-se-a: var(--ac-se-a-dk);
        --ac-se-fade: var(--ac-se-fade-dk);
        --ac-se-title: var(--ac-se-title-dk);
        --ac-la: var(--ac-la-dk);
        --ac-la-a: var(--ac-la-a-dk);
        --ac-la-fade: var(--ac-la-fade-dk);
        --ac-la-title: var(--ac-la-title-dk);
        --ac-vn: var(--ac-vn-dk);
        --ac-vn-a: var(--ac-vn-a-dk);
        --ac-vn-fade: var(--ac-vn-fade-dk);
        --ac-vn-title: var(--ac-vn-title-dk);
        --ac-pu: var(--ac-pu-dk);
        --ac-pu-a: var(--ac-pu-a-dk);
        --ac-pu-fade: var(--ac-pu-fade-dk);
        --ac-pu-title: var(--ac-pu-title-dk);
        --ac-ro: var(--ac-ro-dk);
        --ac-ro-a: var(--ac-ro-a-dk);
        --ac-ro-fade: var(--ac-ro-fade-dk);
        --ac-ro-title: var(--ac-ro-title-dk);
        --ac-pk: var(--ac-pk-dk);
        --ac-pk-a: var(--ac-pk-a-dk);
        --ac-pk-fade: var(--ac-pk-fade-dk);
        --ac-pk-title: var(--ac-pk-title-dk);
        --ac-gd: var(--ac-gd-dk);
        --ac-gd-a: var(--ac-gd-a-dk);
        --ac-gd-fade: var(--ac-gd-fade-dk);
        --ac-gd-title: var(--ac-gd-title-dk);
        --ac-bn: var(--ac-bn-dk);
        --ac-bn-a: var(--ac-bn-a-dk);
        --ac-bn-fade: var(--ac-bn-fade-dk);
        --ac-bn-title: var(--ac-bn-title-dk);
        --ac-gy: var(--ac-gy-dk);
        --ac-gy-a: var(--ac-gy-a-dk);
        --ac-gy-fade: var(--ac-gy-fade-dk);
        --ac-gy-title: var(--ac-gy-title-dk);
        --ac-bk: var(--ac-bk-dk);
        --ac-bk-a: var(--ac-bk-a-dk);
        --ac-bk-fade: var(--ac-bk-fade-dk);
        --ac-bk-title: var(--ac-bk-title-dk);
        --ac-t1: var(--ac-t1-dk);
        --ac-t1-a: var(--ac-t1-a-dk);
        --ac-t1-fade: var(--ac-t1-fade-dk);
        --ac-t1-title: var(--ac-t1-title-dk);
        --ac-t2: var(--ac-t2-dk);
        --ac-t2-a: var(--ac-t2-a-dk);
        --ac-t2-fade: var(--ac-t2-fade-dk);
        --ac-t2-title: var(--ac-t2-title-dk);

        // ---

        --ac-gd-fade-bd: var(--ac-gd-fade-bd-dk);
        --ac-pk-fade-bd: var(--ac-pk-fade-bd-dk);
        --ac-ye-fade-bd: var(--ac-ye-fade-bd-dk);
        --ac-lm-fade-bd: var(--ac-lm-fade-bd-dk);
        --ac-aq-fade-bd: var(--ac-aq-fade-bd-dk);
        --ac-la-fade-bd: var(--ac-la-fade-bd-dk);

        --ac-bn-fade-bd: var(--ac-bn-fade-bd-dk);
        --ac-ro-fade-bd: var(--ac-ro-fade-bd-dk);
        --ac-rd-fade-bd: var(--ac-rd-fade-bd-dk);
        --ac-og-fade-bd: var(--ac-og-fade-bd-dk);
        --ac-gn-fade-bd: var(--ac-gn-fade-bd-dk);
        --ac-cy-fade-bd: var(--ac-cy-fade-bd-dk);
        --ac-bu-fade-bd: var(--ac-bu-fade-bd-dk);
        --ac-vn-fade-bd: var(--ac-vn-fade-bd-dk);
        --ac-gy-fade-bd: var(--ac-gy-fade-bd-dk);

        --ac-pu-fade-bd: var(--ac-pu-fade-bd-dk);
        --ac-wn-fade-bd: var(--ac-wn-fade-bd-dk);
        --ac-ol-fade-bd: var(--ac-ol-fade-bd-dk);
        --ac-mn-fade-bd: var(--ac-mn-fade-bd-dk);
        --ac-se-fade-bd: var(--ac-se-fade-bd-dk);
        --ac-bk-fade-bd: var(--ac-bk-fade-bd-dk);

        --ac-t1-fade-bd: var(--ac-t1-fade-bd-dk);
        --ac-t2-fade-bd: var(--ac-t2-fade-bd-dk);

        // Typora 代码块着色样式变量
        --cm-keyword: var(--cm-keyword-dk);
        --cm-variable: var(--cm-variable-dk);
        --cm-variable-2: var(--cm-variable-2-dk);
        --cm-variable-3: var(--cm-variable-3-dk);
        --cm-tag: var(--cm-tag-dk);
        --cm-attribute: var(--cm-attribute-dk);
        --cm-string: var(--cm-string-dk);
        --cm-string-2: var(--cm-string-2-dk);
        --cm-comment: var(--cm-comment-dk);
        --cm-header: var(--cm-header-dk);
        --cm-quote: var(--cm-quote-dk);
        --cm-hr: var(--cm-hr-dk);
        --cm-link: var(--cm-link-dk);
        --cm-negative: var(--cm-negative-dk);
        --cm-positive: var(--cm-positive-dk);
        --cm-meta: var(--cm-meta-dk);
        --cm-bulidin: var(--cm-bulidin-dk);
        --cm-bracket: var(--cm-bracket-dk);
        --cm-atom: var(--cm-atom-dk);
        --cm-number: var(--cm-atom-dk);

        // --------------------
        // Typora UI 颜色变量
        --bg-color: var(--d-bc-dk);//var(--d-bc-tsp-dk); // 替换为透明色，以在 Typora 编辑时正常显示背景图片
        --side-bar-bg-color: var(--d-bc-dk);
        --text-color: var(--d-fc-dk);

        --control-text-color: var(--d-fc-dk);
        --control-text-hover-color: var(--d-fc-dk);
        --window-border: 1px solid var(--pn-c-dk);

        --active-file-bg-color:  var(--d-bc-dk);
        --active-file-text-color: var(--d-fc-dk);

        --item-hover-bg-color: var(--pn-c-dk);
        --item-hover-text-color: var(--d-fc-dk);

        --primary-color: @themeBgColor;

        --serch-select-bg-color: @themeBgColorFade;
    }

    // 错误图片背景反色
    #write .md-img-error>.md-meta {
        filter: var(--v-invert-dark);
    }

    // 备注文本
    .noteText tspan {
        fill: var(--d-fc-lg) !important;
    }

    // 代码块内代码区域
    #write pre.ty-contain-cm .CodeMirror-lines {
        background: var(--c-blk-bg);
        background-size: @codeBlockBackgroundSize;
        background-repeat: @codeBlockBackgroundRepeat;
        background-position: @codeBlockBackgroundPosition;
    }
}
